<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>菜单权限</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="menu">
            <div class="menu-tit">
                <el-input 
                    id="input1"
                    class="sope" 

                    relize="none"
                   
                    style="width: 55%" 
                    placeholder="输入关键字进行过滤"
                ></el-input>
                <el-button type="primary" class="el-icon-plus sope">父级</el-button>
                <el-button type="warning" class="el-icon-download sope">导出</el-button>
            </div>
            <div class="tree">
                <p>菜单权限树</p>
            <div class="block">
               <el-tree
                :data="treeList"
                :expand-on-click-node=false
                show-checkbox
                accordion
                node-key="id"
                :props="defaultProps"
                ref="tree"
        >
        <span slot-scope="{data}" class="custom-tree-node">
          <span>
            <i :class="data.icon"></i><span style="font-size:17px;margin:0 20px 0 15px">{{data.menuName}}</span>
            
             
            <span v-if="data.perms===''||data.perms===null" style="font-size:16px;color:#409EFF;border:1px solid #409EFF;border-radius:5px;padding:0 5px">菜单</span>
             <span v-else style="color:#ECAB3C;border:1px solid #ECAB3C;font-size:14px;padding:0 5px;border-radius:5px">权限[{{data.perms}}]</span>

          </span>
          <span>
            
          <el-button size="mini" type="text" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-plus">增加</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row.id)">删除</el-button>
          </span>
        </span>
       
        </el-tree>
     </div>
    </div>
        </div>
    </div>
    
</template>

<script>
let id = 1000;
export default {  
    data(){
      return {
        // name:"menupower",
        // input:"",
        // data: JSON.parse(JSON.stringify(data)),
        // data: JSON.parse(JSON.stringify(data)),
        treeList:[],
          defaultProps: {
                    id:"id",
                    children: 'children',
                    label: 'menuName',
                    icon:'icon'
                },
      }
    },
    mounted(){
      this.getmenuTree()
    },
    methods: {
      // append(data) {
      //   const newChild = { id: id++, label: 'testtest', children: [] };
      //   if (!data.children) {
      //     this.$set(data, 'children', []);
      //   }
      //   data.children.push(newChild);
      // },

      // remove(node, data) {
      //   const parent = node.parent;
      //   const children = parent.data.children || parent.data;
      //   const index = children.findIndex(d => d.id === data.id);
      //   children.splice(index, 1);
      // },
      //获取树形菜单数据
      async getmenuTree(){
         let res = await this.$http.get("/menu/tree");
         if(res.status===200){
           this.treeList = res.data.data.tree
         }
         console.log(res)
      }
    },
}
</script>

<style lang="less" scoped>
    .menu{
        height: auto;
        border-radius: 5px;
        margin-top: 15px;
        box-sizing: border-box;
        box-shadow: 4px 4px 10px #b1b1b1;
        background-color: #FFFFFF;
        padding-left: 20px;
    }
    .menu-tit{
        padding-top: 20px;
        .sope{
            margin-right: 30px;
            width: 100px;
            height: 50px;
           
        }
    }
    /deep/ .menu #input1{
        min-height: 30px;
        margin: 0px;
        height: 55px;
    }
    .tree{
        padding-top: -20px;
        padding-bottom: 20px;
        font-size: 20px;
    }
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>